<template>
  <!-- 七日商品销售排名 -->
  <div class="msgcontent">
    <div class="msgtitle">
      <span class="msgSpanTitle">商品排名</span>
      <span class="msgSpanTitle">商品名称</span>
      <span class="msgSpanTitle">销售数据</span>
      <span class="msgSpanTitle">销售环比</span>
    </div>
    <div class="msgScroll">
      <vueSeamlessScroll v-if="flag" :data="msgList" :class-option="classOption">
        <div v-for="(item, index) in msgList" :key="index" class="msgScrollItem">
          <span class="msgSpanItem">{{ index + 1 }}</span>
          <!-- <div class="msgSpanItem"> -->
          <span class="msgSpanItem">{{ item.shoppingName | spliceStr }}</span>
          <!-- </div> -->
          <span class="msgSpanItem">{{ item.salesData }}</span>
          <span class="msgSpanItem" style="display: flex"><span style="flex: 1; text-align: rightyy">{{
            item.salesMonth
          }}</span><svg-icon :icon-class="item.isPositive === '1' ? 'shangsheng' : 'xiajiang'"
              style="width: 50%; font-size: 0.1146rem; text-align: left" /></span>
        </div>
      </vueSeamlessScroll>
      <div v-else class="noGoods">暂无商品</div>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
import { getStoreBestSellers } from "@/api/user";
// import { rsaDecrypt } from '@/utils/commonutils3'
import { getToken } from "@/utils/auth";
export default {
  name: "MsgCharts",
  components: {
    vueSeamlessScroll,
  },
  filters: {
    spliceStr(str) {
      if (str.length > 5) {
        return str.substring(0, 8) + "...";
      } else {
        return str;
      }
    },
  },

  data() {
    return {
      msgList: [],
      classOption: {
        step: 0.5,
        // autoPlay: true,
        limitMoveNum: 11,
      },
      flag: false,
    };
  },
  computed: {},
  created() { },
  mounted() {
    if (getToken()) {
      this.getStoreBestSellers();
    }
  },
  methods: {
    async getStoreBestSellers() {
      const res = await getStoreBestSellers();
      // console.log(res, '热销')
      if (res.code === 200) {
        this.msgList = res.data.screenHotList;
        if (this.msgList.length === 0) {
          this.flag = false;
        } else {
          this.flag = true;
        }
        // if (this.msgList.length >= 10) {
        //   this.classOption.autoPlay = true
        // } else {
        //   this.classOption.autoPlay = false
        // }
        console.log(this.flag, "热销");
        console.log(this.msgList, "热销");
      }
    },
  },
};
</script>

<style scoped lang="scss">
.msgcontent {
  height: 2.849rem;
  display: flex;
  flex-direction: column;

  .msgtitle {
    display: flex;
    /* flex: 1; */
    justify-content: space-between;

    .msgSpanTitle {
      font-weight: 600;
      font-size: 0.0938rem;
      color: rgba(255, 255, 255, 0.8);
      width: 25%;
      text-align: center;
      padding-top: 0.0677rem;
      padding-bottom: 0.0521rem;
    }
  }

  .msgScroll {
    height: 2.3802rem;
    padding-bottom: 0.1563rem;
    overflow: hidden;

    .msgScrollItem {
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      font-size: 0.0833rem;
      color: #bdd1ff;
      margin-bottom: 0.0521rem;

      .msgSpanItem {
        width: 25%;
        height: 0.1719rem;
        line-height: 0.1719rem;
        text-align: center;
      }
    }

    /* .msgScrollItem:nth-child(1) {
      background: linear-gradient(
        90deg,
        #e23af5 0%,
        rgba(226, 58, 245, 0) 100%
      );
    }
    .msgScrollItem:nth-child(2) {
      background: linear-gradient(
        90deg,
        #9d3bff 0%,
        rgba(157, 59, 255, 0) 100%
      );
    }
    .msgScrollItem:nth-child(3) {
      background: linear-gradient(90deg, #493af5 0%, rgba(73, 58, 245, 0) 100%);
    } */
    .noGoods {
      text-align: center;
      padding-top: 0.1563rem;
      font-size: 0.1042rem;
      color: #bdd1ff;
    }
  }
}

// .scrolling-text {
//   overflow: hidden;
//   white-space: nowrap;
//   width: 100%;
// }

// .scrolling-text span {
//   display: inline-block;
//   padding-left: 100%;
//   animation: marquee 10s linear infinite; /* 调整动画时长和效果 */
// }

// @keyframes marquee {
//   0% {
//     transform: translateX(0px);
//   }
//   100% {
//     transform: translateX(-100%);
//   }
// }
</style>
